<template>
    <div class="container">
        <section class="order-card">
            <div class="box">
                    <div class="search">
                        <form action="" method="post">
                        <!-- 搜索图标 -->
                        <img src="@/assets/images/search.png" class="search-icon" alt="搜索图标"
                        >
                        <input placeholder="搜索外卖/跑腿/电商订单" type="text" class="search-input">
                        </form>
                    </div>
            </div>
                <div class="card-header">
                    <h2 class="card-title">全部订单</h2>
                    <h2 class="card-title1"><p style="color: rgba(0, 0, 0, 0.5)">待评价</p></h2>
                    <h2 class="card-title2"><p style="color: rgba(0, 0, 0, 0.5)">退款/售后</p></h2>
                </div>
                
                <!-- 订单列表 -->
                <div v-if="orders.length > 0">
                    <!-- 进行中订单 -->
                    <div v-if="processingOrder" class="order-item processing">
                        <div class="order-header">
                            <img class="shop-img" :src="processingOrder.shopImg || require('@/assets/images/meituan.png')" />
                            <div class="shop-info">
                                <span class="shop-name">{{ processingOrder.shopName }}</span>
                                <span class="shop-tag">{{ processingOrder.shopTag }}</span>
                            </div>
                            <span class="order-status processing">进行中</span>
                        </div>
                        <div class="order-time">下单时间：{{ processingOrder.time }}</div>
                        <div class="order-goods">
                            <div v-for="item in processingOrder.items" :key="item.name" class="goods-item">
                                <img :src="item.img || require('@/assets/images/product/food.png')" class="goods-img" />
                                <span class="goods-name">{{ item.name }}</span>
                                <span class="goods-qty">x{{ item.quantity }}</span>
                                <span class="goods-price">¥{{ (item.price * item.quantity).toFixed(2) }}</span>
                            </div>
                        </div>
                        <div class="order-total">实付金额：<span>¥{{ Number(processingOrder.total).toFixed(2) }}</span></div>
                    </div>
                    <!-- 已完成订单 -->
                    <div v-for="order in finishedOrders.slice(0,3)" :key="order.id" class="order-item finished">
                        <div class="order-header">
                            <img class="shop-img" :src="order.shopImg || require('@/assets/images/meituan.png')" />
                            <div class="shop-info">
                                <span class="shop-name">{{ order.shopName }}</span>
                                <span class="shop-tag">{{ order.shopTag }}</span>
                            </div>
                            <span class="order-status finished">已完成</span>
                        </div>
                        <div class="order-time">下单时间：{{ order.time }}</div>
                        <div class="order-goods">
                            <div v-for="item in order.items" :key="item.name" class="goods-item">
                                <img :src="item.img || require('@/assets/images/product/food.png')" class="goods-img" />
                                <span class="goods-name">{{ item.name }}</span>
                                <span class="goods-qty">x{{ item.quantity }}</span>
                                <span class="goods-price">¥{{ (item.price * item.quantity).toFixed(2) }}</span>
                            </div>
                        </div>
                        <div class="order-total">实付金额：<span>¥{{ Number(order.total).toFixed(2) }}</span></div>
                    </div>
                </div>
                <!-- 空状态 -->
                <div v-else class="empty-state">
                    <div class="empty-icon">
                        <img src="">
                    </div>
                    <p class="empty-text">一个订单都没有哦~</p>
                    <p class="empty-tip">给自己定一个小目标，先下一单</p>
                </div>

                <button class="primary-btn">
                    立即下单
                </button>
            </section>
      <section class="order-card">
        <div class="box">
          <div class="search">
            <form action="" method="post">
              <input placeholder="🔍搜索外卖/跑腿/电商订单" type="text">
            </form>
          </div>
        </div>
        <div class="card-header">
          <h2 class="card-title">全部订单</h2>
          <h2 class="card-title1"><p style="color: rgba(0, 0, 0, 0.5)">待评价</p></h2>
          <h2 class="card-title2"><p style="color: rgba(0, 0, 0, 0.5)">退款/售后</p></h2>
        </div>
  
        <!-- 清除冲突标记，合并代码逻辑 -->
        <!-- 订单列表 -->
        <div v-if="orders.length > 0">
          <!-- 进行中订单 -->
          <div v-if="processingOrder" class="order-item processing">
            <div class="order-header">
              <img class="shop-img" :src="processingOrder.shopImg || require('@/assets/images/meituan.png')" />
              <div class="shop-info">
                <span class="shop-name">{{ processingOrder.shopName }}</span>
                <span class="shop-tag">{{ processingOrder.shopTag }}</span>
              </div>
              <span class="order-status processing">进行中</span>
            </div>
            <div class="order-time">下单时间：{{ processingOrder.time }}</div>
            <div class="order-goods">
              <div v-for="item in processingOrder.items" :key="item.name" class="goods-item">
                <img :src="item.img || require('@/assets/images/product/food.png')" class="goods-img" />
                <span class="goods-name">{{ item.name }}</span>
                <span class="goods-qty">x{{ item.quantity }}</span>
                <span class="goods-price">¥{{ (item.price * item.quantity).toFixed(2) }}</span>
              </div>
            </div>
            <div class="order-total">实付金额：<span>¥{{ Number(processingOrder.total).toFixed(2) }}</span></div>
          </div>
          <!-- 已完成订单 -->
          <div v-for="order in finishedOrders.slice(0,3)" :key="order.id" class="order-item finished">
            <div class="order-header">
              <img class="shop-img" :src="order.shopImg || require('@/assets/images/meituan.png')" />
              <div class="shop-info">
                <span class="shop-name">{{ order.shopName }}</span>
                <span class="shop-tag">{{ order.shopTag }}</span>
              </div>
              <span class="order-status finished">已完成</span>
            </div>
            <div class="order-time">下单时间：{{ order.time }}</div>
            <div class="order-goods">
              <div v-for="item in order.items" :key="item.name" class="goods-item">
                <img :src="item.img || require('@/assets/images/product/food.png')" class="goods-img" />
                <span class="goods-name">{{ item.name }}</span>
                <span class="goods-qty">x{{ item.quantity }}</span>
                <span class="goods-price">¥{{ (item.price * item.quantity).toFixed(2) }}</span>
              </div>
            </div>
            <div class="order-total">实付金额：<span>¥{{ Number(order.total).toFixed(2) }}</span></div>
          </div>
        </div>
  
        <!-- 空状态（与 v-if="orders.length > 0" 对应） -->
        <div v-else class="empty-state">
          <div class="empty-icon">
            <img src=""> <!-- 建议添加默认图片路径，避免空链接 -->
          </div>
          <p class="empty-text">一个订单都没有哦~</p>
          <p class="empty-tip">给自己定一个小目标，先下一单</p>
        </div>
  
        <button class="primary-btn">
          立即下单
        </button>
      </section>
    </div>
    <AppFooter />
  </template>

<script>
export default {
    data() {
        return {
            orders: []
        }
    },
    computed: {
        processingOrder() {
            return this.orders.find(order => order.status === '进行中');
        },
        finishedOrders() {
            return this.orders.filter(order => order.status !== '进行中');
        }
    },
    mounted() {
        let orders = JSON.parse(localStorage.getItem('orders') || '[]');
        // 如果没有已完成订单，自动生成3条
        if (!orders.some(o => o.status === '已完成')) {
            const finishedOrders = [
                {
                    id: 10001,
                    shopName: '华莱士·全鸡汉堡（莲花池店）',
                    shopTag: '高折扣',
                    shopImg: require('@/assets/images/merchant-img-ticket1.png'),
                    items: [
                        { name: '全鸡汉堡', quantity: 2, price: 12.5, img: require('@/assets/images/product/food.png') },
                        { name: '薯条', quantity: 1, price: 6.0, img: require('@/assets/images/product/food1.png') }
                    ],
                    total: 31.0,
                    status: '已完成',
                    time: '2024-05-01 12:30:00'
                },
                {
                    id: 10002,
                    shopName: '蜜雪冰城（步行街店）',
                    shopTag: '美团专送',
                    shopImg: require('@/assets/images/merchant-img-ticket1.png'),
                    items: [
                        { name: '芒果冰淇淋', quantity: 3, price: 5.9, img: require('@/assets/images/product/food2.png') }
                    ],
                    total: 17.7,
                    status: '已完成',
                    time: '2024-04-28 18:20:00'
                },
                {
                    id: 10003,
                    shopName: '瑞幸咖啡（泸州广场店）',
                    shopTag: '美团快送',
                    shopImg: require('@/assets/images/nearby-section6.png'),
                    items: [
                        { name: '生椰拿铁', quantity: 2, price: 9.9, img: require('@/assets/images/product/food3.png') }
                    ],
                    total: 19.8,
                    status: '已完成',
                    time: '2024-04-20 09:10:00'
                }
            ];
            orders = orders.concat(finishedOrders);
            localStorage.setItem('orders', JSON.stringify(orders));
        }
        this.orders = orders;
    }
}
</script>

<style lang="less" scoped>
@base-color: yellow;
@text-light: #999;
.search {
  position: relative; 
  width: 300px; 
}


.search-icon {
  position: absolute;
  left: 20px;        
  top: 50%;          
  transform: translateY(-50%);
  width: 25px;       
  height: 25px;
  pointer-events: none; 
}


.search-input {
  width: 100%;
  padding-left: 50px; 
  height: 36px;
  line-height: 36px;
  border: 1px solid #ddd;
  border-radius: 4px;
}
.container {
    display: flex;
    flex-direction: column;
    height: 100vh; 
    background: #f5f5f5;
}
.box, .search, .search form {
    background-color: yellow;
    padding: 10px; 
}
.box{
    flex-shrink: 0; 
}
.search input[type="text"] {
    background-color: white;
    width: 200%;
    border: 1px solid #ccc; 
    border-radius: 20px; 
    box-sizing: border-box;
}
.main-content {
    flex: 1;
    padding: 0.32rem;
    display: flex; 
}
        div.search {
            padding: 20px 0 10px;
        }
        form {
            position: relative;
            width: 300px;
        }
 
        input,button {
            border: none;   
            outline: none;  
        }
 
        .search input {
            width: 100%;
            height: 50px;
            padding-left: 45px;
            border: 1px solid black;
            font-size: 25px;
            border-radius: 19px;    
        }
    .order-card {
        box-shadow: 0 2px 12px rgba(0,0,0,0.04);
        flex: 1; 
        display: flex; 
        flex-direction: column; 
        position: relative; 

    .card-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-left:0.3125rem;
        background: white;
        height: 1.25rem;
        .card-title {
            font-size: 0.36rem;
            color: #1a1a1a;

        }
        .card-title1{
            font-size: 0.36rem;
            color: #1a1a1a;
            
        }
        .card-title2{
            font-size: 0.36rem;
            color: #1a1a1a;
            margin-right:2.5rem;
        }
        .status-switch {
            display: flex;
            gap: 0.24rem;

            .status-btn {
                padding: 0.12rem 0.32rem;
                border: 1px solid #eee;
                border-radius: 0.16rem;
                background: transparent;
                font-size: 0.28rem;
                &.active {
                    border-color: @base-color;
                    color: @base-color;
                }
            }
        }
    }
    .empty-state {
    text-align: center;
    margin-bottom: 0rem;
    margin-top: 25%;
    .empty-icon {
        font-size: 0.8rem;
        margin-bottom: 0.24rem;
    }

    .empty-text {
        font-size: 0.32rem;
        color: #666;
        margin-bottom: 0.16rem;
    }

    .empty-tip {
        font-size: 0.28rem;
        color: @text-light;
    }
}

.primary-btn {
    width: 30%;
    padding: 0.22rem;
    background: @base-color;
    color: black;
    border: none;
    border-radius: 15%;
    font-size: 0.36rem;
    transition: opacity 0.2s;
    display: block; 
    margin: 0.625rem auto 0; 
    
    &:active {
        opacity: 0.9;
    }
}
}

@media (max-width: 750px) {
    html {
        font-size: 100px;
    }
}

.order-item {
    background: #fffbe8;
    border-radius: 24px;
    margin: 32px 0;
    padding: 32px 32px 24px 32px;
    box-shadow: 0 4px 16px rgba(255,209,97,0.13);
    font-family: 'PingFang SC', 'Microsoft YaHei', Arial, sans-serif;
    .order-header {
        display: flex;
        align-items: center;
        margin-bottom: 18px;
        .shop-img {
            width: 72px;
            height: 72px;
            border-radius: 16px;
            margin-right: 18px;
            border: 2px solid #ffd161;
            background: #fff;
            object-fit: cover;
        }
        .shop-info {
            display: flex;
            flex-direction: column;
            flex: 1;
        }
        .shop-name {
            font-size: 32px;
            font-weight: bold;
            color: #333;
            margin-bottom: 6px;
        }
        .shop-tag {
            font-size: 24px;
            color: #ffb800;
            background: #fff2b2;
            border-radius: 6px;
            padding: 2px 12px;
            display: inline-block;
            width: fit-content;
        }
        .order-status {
            font-size: 28px;
            font-weight: bold;
            margin-left: 18px;
            &.processing { color: #ffb800; }
            &.finished { color: #00c800; }
        }
    }
    .order-time {
        font-size: 22px;
        color: #bbb;
        margin-bottom: 12px;
    }
    .order-goods {
        display: flex;
        flex-wrap: wrap;
        margin-bottom: 12px;
        .goods-item {
            display: flex;
            align-items: center;
            margin-right: 32px;
            margin-bottom: 10px;
            .goods-img {
                width: 56px;
                height: 56px;
                border-radius: 10px;
                margin-right: 10px;
                border: 1px solid #ffd161;
                object-fit: cover;
            }
            .goods-name {
                font-size: 24px;
                color: #333;
                margin-right: 10px;
            }
            .goods-qty {
                font-size: 22px;
                color: #999;
                margin-right: 10px;
            }
            .goods-price {
                font-size: 22px;
                color: #ff5339;
            }
        }
    }
    .order-total {
        font-size: 26px;
        color: #333;
        text-align: right;
        span {
            color: #ff5339;
            font-weight: bold;
            font-size: 32px;
        }
    }
}
.order-item.finished {
    background: #f5f5f5;
    .order-status { color: #00c800; }
}
.order-item.processing {
    background: #fffbe8;
    .order-status { color: #ffb800; }
}
</style>